<template>
  <div class="department-tree-search">
    <div class="row">
        <p class="label">部门选择</p>
        <Cascader
            style="width:300px;"
            :disabled='disabled'
            v-model="value"
            :data="departmentTree"
            :change-on-select="true"
            placeholder="请选择地区"
            @on-change="onSelectDpt"
        />
        <Button type="primary" :loading='loading' size="middle" class="ml" :disabled="disabled" @click="onGetDistirbutor(true)">加载经销商</Button>
    </div>
  </div>
</template>
<script> 
import { mapGetters } from 'vuex'
export default {
  props: {
    dataType: {
        type: String,
        default: 'delay'
    },
    isGetDept: {
        type: Boolean,
        default: true
    },
    disabled: Boolean
  },
  data() {
    return {
        value: [],
        departId: '',
        loading: false
    };
  },
  mounted() {
    this.getDptTree()
  },
  computed: {
      ...mapGetters(['departmentTree'])
  },
  methods: {
        getData() {
          this.onGetDistirbutor(true)
        },
        onGetDistirbutor (isSearch) {
            let param = {
                current: 1,
                size: 999999,
                type: this.dataType,
                departId: this.departId,
                isSearch: isSearch
            }
            this.loading = true
            this.$store.dispatch('getDistributDataByDept', param).then(() => {
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        onSelectDpt (val) {
            let [d, a] = val
            this.departId = a ? a : d
        },
        getDptTree () {
           if (!this.isGetDept) return
           this.$store.dispatch('getDepartmentTree')
        }
  }
};
</script>
